<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script>function jiancha() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入用户名。");
        return false;
    }
    var a = document.forms["myForm"]["mima"].value;
    if (a == null || a == "")
      {
    alert("请输入密码");
    return false;
    }
    var m = document.forms["myForm"]["mima"].value;
        b = document.forms["myForm"]["mima1"].value;
    if (b == null || b !== m )
  {
    alert("两次密码输入不一致");
    return false;
    }
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("不是一个有效的 e-mail 地址");
        return false;
        }
    var search_site = document.getElementById("fname").value;  
        var keyname = localStorage.getItem(search_site);  
       if(keyname!==null)
       {
           alert("用户名已使用");
           return false;
    }
  }
    function save(){  
    var site = new Object;
  //site.name=localStorage.length;
    site.keyname = document.getElementById("fname").value;
    site.sitename = document.getElementById("email").value;  
    site.siteurl = document.getElementById("mima").value;
  var d=new Date();
  site.nowtime=d.toLocaleDateString();
    var str = JSON.stringify(site); // 将对象转换为字符串
    localStorage.setItem(site.keyname,str);  
  window.location.href='http://ranyuesheng.gitee.io/buptsice_training_2017_2/loadin.html';
    alert("注册成功");
  }
    
  </script>

   <title>风流注册</title>


<body style="background-color: #F0E68C">
	<h1 style="font-size:3em;text-align:center;color: rgba(50,150,0,0.7);">风流注册</h1>
	<hr>
	
 <form style="text-align:center;" name="myForm"onsubmit="save();" method="get">
 <label for="fname">用户名: </label><input type="text" id="fname" placeholder="在此输入您的用户名"><br>
 <br>
 <br>
<br>
<label for="mima">输入密码:</label><input type="password" size="15" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)" id="mima">  
密码强度:  
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style="display:inline">  
<tbody><tr align="center" bgcolor="#eeeeee">  

<td width="33%" id="strength_L">弱</td>  
<td width="33%" id="strength_M">中</td>  
<td width="33%" id="strength_H">强</td>  
</tr>  
</tbody></table>   
  <br>
 <br>
 <br>
 <label for="mima1">重复密码： </label><input type="password" id="mima1" placeholder="重新输入您的密码"> 
</tr>  
</tbody></table>  
 <br>
 <br>
 <br>
 <label for="email">邮箱地址：</label> <input type="text" id="email" placeholder="邮箱地址"><br>
 <br>
 <br>
 <script>
 function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写字母  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8; //特殊字符  
}  

//bitTotal函数  
//计算出当前密码当中一共有多少种模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  

//checkStrong函数  
//返回密码的强度级别  

function checkStrong(sPW){  
if (sPW.length<=4)  
return 0; //密码太短  
Modes=0;  
for (i=0;i<sPW.length;i++){  
//测试每一个字符的类别并统计一共有多少种模式.  
Modes|=CharMode(sPW.charCodeAt(i));  
}  

return bitTotal(Modes);  

}  

//pwStrength函数  
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色  

function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
case 0:  
Lcolor=Mcolor=Hcolor=O_color;  
case 1:  
Lcolor=L_color;  
Mcolor=Hcolor=O_color;  
break;  
case 2:  
Lcolor=Mcolor=M_color;  
Hcolor=O_color;  
break;  
default:  
Lcolor=Mcolor=Hcolor=H_color;  
}  
}  

document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  </script>

 
 
<input type=submit onclick="return jiancha();" value="我填好啦！">
</form>



</body>
</html>




